<template>
  <div class="ymdiv">
    <div class="descriptions">
      <el-descriptions title="安排专题详情" direction="vertical" :column="3" :size="3" border>
        <el-descriptions-item label="专题" :span="1">
          <p v-if="xghidden == false">我是课程</p>
          <el-select v-if="xghidden == true" v-model="value" class="m-2" placeholder="Select">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="组织" :span="1">
          <p v-if="xghidden == false">我是组织</p>

          <el-select v-if="xghidden == true" v-model="value" multiple placeholder="选择组织" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item :span="4" label="课件">
          <p v-if="xghidden == false">呀呼</p>
          <el-select v-if="xghidden == true" v-model="value" multiple placeholder="选择组织" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select
        ></el-descriptions-item>
        <el-descriptions-item :span="1" label="开始时间"
          ><p v-if="xghidden == false">2022-5-5 12:00:00</p>
          <el-date-picker v-if="xghidden == true" v-model="starttime" type="datetime" placeholder="开始时间"
        /></el-descriptions-item>
        <el-descriptions-item :span="1" label="结束时间"
          ><p v-if="xghidden == false">2022-5-10 12:00:00</p>
          <el-date-picker v-if="xghidden == true" v-model="endtime" type="datetime" placeholder="结束时间"
        /></el-descriptions-item>
        <el-descriptions-item :span="1" label="添加时间" v-if="xghidden == false">2022-5-10 12:00:00</el-descriptions-item>

        <el-descriptions-item label="是否公开" :span="1">
          <el-tag v-if="xghidden == false" class="ml-2" type="success">是</el-tag>
          <el-switch v-if="xghidden == true" v-model="ispublic" style="--el-switch-on-color: #13ce66" inline-prompt active-text="是" inactive-text="否"
        /></el-descriptions-item>

        <el-descriptions-item :span="4" label="备注"
          ><el-input v-model="kcname" placeholder="备注" v-if="xghidden == true" />
          <p v-if="xghidden == false">我是备注</p></el-descriptions-item
        >
        <el-descriptions-item label="操作"
          ><el-button type="primary" v-if="xghidden == false" @click="xg()">修改</el-button> <el-button type="success" v-if="xghidden == true" @click="bcok()">保存</el-button></el-descriptions-item
        >
      </el-descriptions>
      <el-table :data="tableData" style="width: 100%" :row-style="{ height: '60px' }">
        <el-table-column align="center" type="index" label="序号" width="100" />
        <el-table-column align="center" prop="name" label="学员名称" />
        <el-table-column align="center" prop="state" label="学习进度">
          <template #default="scope">
            <el-tag class="ml-2 tabletag">{{ scope.row.schedule }}</el-tag>
          </template></el-table-column
        >
        <el-table-column align="center" prop="zip" label="状态">
          <template #default="scope">
            <el-tag class="ml-2 tabletag" v-if="scope.row.complete == 1" type="success">完成</el-tag>
            <el-tag class="ml-2 tabletag" v-if="scope.row.complete != 1" type="warning">未完成</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { reactive, toRefs } from '@vue/reactivity';
import { useRoute } from 'vue-router';
export default defineComponent({
  setup() {
    const data = reactive({
      xghidden: false,
      kcname: '',
      ispublic: '',
      starttime: '',
      endtime: '',
      tableData: [
        {
          name: 'Tom',
          schedule: '100%',
          complete: 1,
        },
        {
          name: 'Tom',
          schedule: '50%',
          complete: 0,
        },
      ],
    });
    const $route = useRoute();
    const xg = () => {
      data.xghidden = true;
    };
    const bcok = () => {
      data.xghidden = false;
    };
    const value = ref([]);
    const options = [
      {
        value: 'Option1',
        label: 'Option1',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
      {
        value: 'Option3',
        label: 'Option3',
      },
      {
        value: 'Option4',
        label: 'Option4',
      },
      {
        value: 'Option5',
        label: 'Option5',
      },
    ];

    return {
      ...toRefs(data),
      xg,
      bcok,
      value,
      options,
    };
  },
});
</script>
<style scoped>
.descriptions {
  padding: 20px;
}
</style>
